<template>
  <div class="article-item-info">
    <!-- 预加载 -->
    <el-card v-show="articleList.length==0">
      <el-skeleton animated :loading="articleList.length==0">
        <template slot="template">
          <el-skeleton-item variant="h1" style="width: 70%;height:25px;margin:10px auto 15px;display:block" />
          <el-skeleton-item variant="text" style="width: 50%;display:block;margin:10px 0" />
          <el-skeleton-item variant="text" style="width: 30%;display:block;margin:10px 0" />
          <div v-for="item in 2" :key="item">
            <el-skeleton-item variant="h3" style="width: 30%;display:block;margin:15px 0" />
            <el-skeleton-item variant="text" style="width: 100%;display:block;margin:10px 0" />
            <el-skeleton-item variant="text" style="width: 80%;display:block;margin:10px 0" />
            <el-skeleton-item variant="text" style="width: 90%;display:block;margin:10px 0" />
            <el-skeleton-item variant="text" style="width: 100%;display:block;margin:10px 0" />
            <el-skeleton-item variant="text" style="width: 85%;display:block;margin:10px 0" />
            <el-skeleton-item variant="h4" style="width: 40%;display:block;margin:15px 0" />
            <el-skeleton-item variant="text" style="width: 85%;height:25px;display:block;margin:10px 0" />
            <el-skeleton-item variant="h4" style="width: 40%;display:block;margin:15px 0" />
            <el-skeleton-item variant="text" style="width: 85%;height:25px;display:block;margin:10px 0" />
            <el-skeleton-item variant="h4" style="width: 40%;display:block;margin:15px 0" />
            <el-skeleton-item variant="text" style="width: 100%;height:60px;display:block;margin:10px 0" />
          </div>
        </template>
      </el-skeleton>
    </el-card>
    <!-- article-info -->
    <div class="article-info" v-show="articleList.length>0">
      <!-- desc -->
      <el-card>
        <!-- info -->
        <div class="info-desc" v-if="articleList.length>0">
          <div class="info-title">
            <span>{{articleList[0].title}}</span>
          </div>
          <div class="info-tags">
            <div class="tags-top flex">
              <svg class="icon-svg">
                <use xlink:href="#icon-bianji"></use>
              </svg>
              <span class="tags-name">KinXpeng</span>
              <span><i class="el-icon-position"></i> {{articleList[0].create_time}}</span>
              <span v-if="articleList[0].modify_time"><i class="el-icon-refresh"></i> {{articleList[0].modify_time}}</span>
            </div>
            <div class="tag-bottom flex">
              <p class="bottom-category">分类：<span class="tag-button category">{{articleList[0].category}}</span></p>
              <p class="bottom-tags">标签：<span class="tag-button">{{articleList[0].tags}}</span></p>
            </div>
          </div>
          <div class="markdown-body" v-html="articleList[0].content"></div>
        </div>
      </el-card>
      <!-- opertion -->
      <el-card class="article-opertion">
        <div v-if="articleList[0]" class="opertion-item flex">
          <p @click="handleThumbs(articleList[0])">
            <svg class="icon-svg">
              <use xlink:href="#icon-dianzan"></use>
            </svg>
            <span>点赞({{articleList[0].thumbs}})</span>
          </p>
          <p>
            <svg class="icon-svg">
              <use xlink:href="#icon-qiandai"></use>
            </svg>
            <span>打赏</span>
          </p>
          <p @click="handleComments(articleList[0])">
            <svg class="icon-svg">
              <use xlink:href="#icon-pinglun"></use>
            </svg>
            <span>评论</span>
          </p>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      articleList:[],
      article_id:'',
      thumbsFlag:false,
    };
  },
  watch:{
    '$route.params.articleId':function(val){
      this.article_id = val;
      this.getInitArticleList();
    }
  },
  methods:{
    // 数据初始化
    async getInitArticleList(){
      let queryData = {
        article_id:this.article_id
      };
      await this.$axios.post('/blog-api/article/articleInfo',queryData)
        .then((res)=>{
          if(res.data.code == 0){
            res.data.data.forEach((ele)=>{ // 返回时间处理
              let createTime = ele.create_time.split('T');
              let modifyTime = ele.modify_time.split('T');
              ele.create_time = createTime[0] +' '+ createTime[1].split('.')[0];
              ele.modify_time = modifyTime[0] +' '+ modifyTime[1].split('.')[0];
              if(ele.create_time == ele.modify_time) ele.modify_time = '';
            })
            // console.log(res.data.data[0]);
            this.articleList = res.data.data;
            this.initViewCounts(this.articleList[0]); // 浏览量
            document.title = this.articleList[0].title;
          }else{
            this.$notify({
              type:'error',
              position:'top-right',
              message:res.data.msg
            })
          }
        })
        .catch((err)=>{
          this.$notify({
            type:'error',
            position:'top-right',
            message:'网络开小差了哦，请稍后再尝试！'
          })
          console.log(err);
        })
    },
    // 返回
    backArticleList(){
      this.$router.push({path:'/'});
      // this.$router.go(-1);
    },
    // 点赞
    async handleThumbs(articleInfo){
      let thumbsArray = JSON.parse(localStorage.getItem('thumbsArr'));
      if(thumbsArray && thumbsArray.length>0){
        thumbsArray.forEach((ele)=>{
          if(ele == articleInfo.article_id){
            this.thumbsFlag = true;
          }
        })
      }
      if(JSON.parse(localStorage.getItem('thumbs')) && this.thumbsFlag){
        this.$notify({
          type:'error',
          position:'top-right',
          message:'您已经点过赞啦'
        })
      }else{
        articleInfo.thumbs++;
        await this.$axios.post("/blog-api/article/thumbs",{
          article_id:articleInfo.article_id,
          thumbs:articleInfo.thumbs
        })
          .then((res)=>{
            if(res.data.code == 0){
              this.$notify({
                type:'success',
                position:'top-right',
                message:'感谢您的点赞哦'
              })
            }
            localStorage.setItem('thumbs',true);
            if(JSON.parse(localStorage.getItem('thumbsArr')) == undefined || JSON.parse(localStorage.getItem('thumbsArr')) == null){
              localStorage.setItem('thumbsArr',JSON.stringify([articleInfo.article_id]));
            }else{
              let thumbsArr1 = JSON.parse(localStorage.getItem('thumbsArr'));
              thumbsArr1.push(articleInfo.article_id);
              localStorage.setItem('thumbsArr',JSON.stringify(thumbsArr1));
            }
          })
          .catch((err)=>{
            console.log(err);
            this.$notify({
              type:'error',
              position:'top-right',
              message:'可能出了一点点小差错呢'
            })
          })
      }
    },
    // 评论
    handleComments(articleInfo){
      this.$notify({
        type:'info',
        position:'top-right',
        message:'开发中，敬请期待。。。'
      })
    },
    // 浏览量
    async initViewCounts(articleInfo){
      articleInfo.view_count++;
      await this.$axios.post("/blog-api/article/viewCounts",{
        article_id:articleInfo.article_id,
        view_count:articleInfo.view_count
      })
        .then((res)=>{
          if(res.data.code == 0){
            // this.$notify({
            //   type:'success',
            //   position:'top-right',
            //   message:'感兴趣的话就点个赞哦'
            // })
          }
        })
        .catch((err)=>{
          console.log(err);
        })
    },
  },
  created(){
    this.article_id = this.$route.params.articleId; // 文章id
    this.getInitArticleList(); // 数据初始化
  },
  mounted(){
    window.scrollTo(0,0);
  },
};
</script>

<style lang='scss' scoped>
@import "@/assets/scss/dark.scss";
.article-item-info{
  width:97%;
  margin:0 auto;
  // article-info
  .article-info{
    // info-tags
    .info-tags{
      height:50px;
      line-height: 25px;
      font-size: 12px;
      margin:10px 0;
      padding:0 10px;
      // @include background_color("background_color6");
      .tags-top{
        .icon-svg{
          width:16px;
          height:16px;
          margin:4px 4px 0 0;
        }
        &>span{
          margin:0 10px 0 0;
        }
        .tags-name{
          color:#b59551;
        }
      }
      .tag-bottom{
        p{
          padding:0 5px;
          height:24px;
          .tag-button{
            display: inline-block;
            height:20px;
            line-height:19px;
            // @include border_style("border_style3");
            border-radius: 12px;
            padding:0 10px;
            // color:#75c1ea;
            color:#fff;
            // @include background_color("background_color");
            background-color: #f19c38;
          }
          .category{
            background-color: #79a4e9;
          }
        }
      }
    }
    .info-title{
      font-size:20px;
      text-align:center;
      line-height:30px;
      font-weight: bold;
      font-family: Georgia, Times, 'Times New Roman', serif;
      // @include font_color("text-color1");
      color: #317adf;
      span{
        &:hover{
          color:#e4524a !important;
          cursor: default;
        }
      }
    }
    // markdown-body
    .markdown-body{
      font-size: 14px;
      font-family: SweiSpringSugar,Georgia, Times, 'Times New Roman', serif;
      @include font_color("text-color1");
      // @include background_color("background_color");
      /deep/ pre{
        font-size: 12px;
        // @include background_color("background_color6");
        padding:0;
        .hljs{
          padding:12px 14px;
          // @include background_color("background_color6");
        }
      }
      /deep/blockquote{
        border-color:#317adf;
        @include background_color("background_color6");
      }
    }
    // article-opertion
    .article-opertion{
      margin:8px 0;
      .opertion-item{
        &>p{
          flex:1;
          height:30px;
          text-align: center;
          line-height: 30px;
          font-size: 12px;
          cursor: pointer;
          @include border_right_style("border_right_style");
          &:last-child{
            border-right:none !important;
          }
          &:hover{
            color:#317adf;
          }
          .icon-svg{
            width:20px;
            height:20px;
            margin:5px;
          }
          span{
            display: inline-block;
            vertical-align: top;
          }
        }
      }
    }
  }
}

// 滚动条部分
// pre
/deep/ pre::-webkit-scrollbar {
  width: 10px;
  height: 0;
}
/deep/ .markdown-body:hover pre::-webkit-scrollbar {
  width: 10px;
  height: 4px;
}
/deep/ pre::-webkit-scrollbar-thumb { //滑块部分
  border-radius: 5px;
  background-color: #aaa;
}
/deep/ pre::-webkit-scrollbar-track { //轨道部分
  @include background_color("background_color2");
  border-radius: 5px;
}

// hljs
/deep/ pre .hljs::-webkit-scrollbar {
  width: 10px;
  height: 0;
}
/deep/ .markdown-body:hover pre .hljs::-webkit-scrollbar {
  width: 10px;
  height: 4px;
}
/deep/ pre .hljs::-webkit-scrollbar-thumb { //滑块部分
  border-radius: 5px;
  background-color: #aaa;
}
/deep/ pre .hljs::-webkit-scrollbar-track { //轨道部分
  @include background_color("background_color2");
  border-radius: 5px;
}
</style>